<template>
  <div class="tree">
    <el-tabs>
      <el-tab-pane label="轨迹回放">
        <!-- 日历 -->
        <div class="calendarbox">
          <el-calendar v-model="value">
            <template slot="dateCell" slot-scope="{ data }">
              <div @click="choosedata(data.day)">
                <span>{{ data.day.split("-").slice(2).join("-") }}</span>
                <span style="color: red">{{ dealMyDate(data.day) }}</span>
              </div>
            </template>
          </el-calendar>
        </div>

        <!-- 搜索 -->
        <div class="flex">
          <el-input
            v-model="input"
            @keyup.enter.native="companyKeySearch"
            :placeholder="searchPlace"
            style="width: 180rem; margin-right: 5px"
            size="mini"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="companyKeySearch"
            >搜索</el-button
          >
        </div>
        <!-- 树 -->
        <div class="treedata">
          <el-tree
            :data="companyTree"
            :props="areaProps"
            ref="refcompany"
            highlight-current
            accordion
            @node-click="companyCheck"
          >
          </el-tree>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import api from "@/api/location/track";

export default {
  props: {},
  data() {
    return {
      value: new Date(),

      input: "",
      searchPlace: "输入环保编号、名称查询",
      areaProps: {
        children: "children",
        label: "label",
      },
      resDate: [
        // { date: "2025-01-02", content: "●" },
        // { date: "2025-01-03", content: "●" },
        // { date: "2025-01-05", content: "●" },
      ],

      companyTree: [],
    };
  },
  watch: {
    totalsearchArr(newData) {
      let data = newData.join(",");
      var reg = /^[\'\"]+|[\'\"]+$/g;
      let str = data.replace(reg, " ");
      // ////console.log(str)
      this.searchCar(str);
    },
  },
  methods: {
    getCompanyTree() {
      this.$set(this, "companyTree", [
        { id: 0, label: "加载中...", disabled: true },
      ]);

      api.deptTree().then((res) => {
        // console.log("==========>", res);
        if (res.code == 200) {
          let result = [res.data];
          console.log(result);
          result.forEach((leveOne) => {
            leveOne.disabled = true;
            leveOne.children.forEach((leveTwo) => {
              leveTwo.disabled = true;
            });
          });
          this.$set(this, "companyTree", result);
        }
      });
    },
    companyCheck(data) {
      console.log("======12=>", data);
      if (data.configId) {
        this.configId = data.configId;
        this.input = data.label;
        // this.searchPlace = data.label;
        this.$emit("historyInfo", this.configId);
        console.log("=====deviceNumber==>", this.configId);
        console.log("=====data.configId==>", data.configId);
        this.gethasDate(data.configId);
      } else {
        this.configId = "";
        this.input = "";
        this.searchPlace = data.label;
        this.$emit("historyInfo", this.configId);
      }

      // this.$emit("historyInfo", this.carNo);
    },
    companyKeySearch() {
      if (!this.input) {
        this.searchPlace = "输入环保编号、名称查询";
        this.getCompanyTree();
        return;
      }
      let params = {
        searchValue: this.input,
      };
      api.groupCarTree(params).then((res) => {
        console.log("==========>", res);
        if (res.code == 200) {
          this.$set(this, "companyTree", res.data);
        }
      });
    },
    show(val) {
      console.log(val);
    },
    // 获取有历史轨迹的日期
    gethasDate(configId) {
      this.resDate = [];
      api.trackDateMark(configId).then((res) => {
        console.log(res.data);
        let data = res.data;
        data.forEach((item) => {
          if (item.flag > 0) {
            this.resDate.push({ date: item.flagDate, content: "●" });
          }
        });
        // this.resDate = res.result;
      });
    },
    // 获取选中日期
    choosedata(val) {
      console.log(val);
      this.$emit("chooseDate", val);
    },

    // =========
    dealMyDate(v) {
      // console.log("==>", v);
      let len = this.resDate.length;
      let res = "";
      for (let i = 0; i < len; i++) {
        if (this.resDate[i].date == v) {
          res = this.resDate[i].content;
          break;
        }
      }
      return res;
    },
  },
  created() {
    // 获取公司和省市区
    // let data = { searchType: 0 };

    this.getCompanyTree();
  },
};
</script>

<style lang="scss" scoped>
.tree {
  .treedata {
    height: calc(60vh - 300px) !important;
    overflow: scroll;
    display: -webkit-box;
  }
  // .treeTable {
  //   overflow: hidden;
  //   max-height: 200px;
  // }
  .is-selected {
    color: #1989fa;
  }
  .calendarbox {
    // margin-top: 20px;
    height: 200px;
    font-size: 12px;
    ::v-deep .el-calendar__header {
      padding: 0;
      justify-content: flex-start;
    }
    ::v-deep .el-calendar__title {
      padding: 12px 2px;
    }
    ::v-deep .el-button--mini {
      padding: 4px 6px;
    }
    ::v-deep .el-calendar-table {
      width: 300px;
      padding: 5px;
    }
    ::v-deep .el-calendar-table thead th {
      padding: 6px 0;
    }
    ::v-deep .el-calendar__button-group {
      margin-top: 6px;
      margin-left: 6px;
    }
    ::v-deep .el-calendar__body {
      padding: 0;
    }
    ::v-deep .el-calendar-table .el-calendar-day {
      padding: 2px;
      height: 20px;
      line-height: 20px;
      text-align: center;
    }
  }
  .flex {
    display: flex;
    margin-top: 20px;
  }
}
</style>
